<template>
  <section>
    <div class="grid_12">
      <div v-if="article.operation=='articleShow'" class="grid_9 omega center-panel">
        <section class="ariticle-panel">
          <label class="article-title">{{article.showTitle}}</label>
          <content v-html="article.showContent" class="article-content markdown-body"></content>
        </section>
      </div>
      <!-- 树菜单-->
      <div class="grid_3   alpha left-panel">
        <el-tree node-key="nodeId" ref="tree"  :data="tree.nodeDatas" :props="tree.defaultProps"
                lazy :load="loadDirNode" @node-click="handleNodeClick" @node-drop="nodeDrop">
        </el-tree>
      </div>
    </div>
  </section>
</template>

<script>
// require styles
import '@/assets/css/article.css'
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import hljs from 'highlight.js'
import '../../node_modules/highlight.js/styles/github.css'
import { Tree } from 'element-ui'
import axios from '../../node_modules/axios/dist/axios'
import marked from 'marked/lib/marked'
import '../../node_modules/github-markdown-css/github-markdown.css'

export default {
  data () {
    return {
      editor: {
        toolbar: {
          bold: true, // 粗体
          italic: true, // 斜体
          header: true, // 标题
          underline: true, // 下划线
          strikethrough: false, // 中划线
          mark: true, // 标记
          superscript: false, // 上角标
          subscript: false, // 下角标
          quote: true, // 引用
          ol: true, // 有序列表
          ul: true, // 无序列表
          link: true, // 链接
          imagelink: true, // 图片链接
          code: true, // code
          table: true, // 表格
          fullscreen: true, // 全屏编辑
          readmodel: false, // 沉浸式阅读
          htmlcode: false, // 展示html源码
          help: false, // 帮助
          /* 1.3.5 */
          undo: true, // 上一步
          redo: false, // 下一步
          trash: false, // 清空
          save: false, // 保存（触发events中的save事件）
          /* 1.4.2 */
          navigation: false, // 导航目录
          /* 2.1.8 */
          alignleft: false, // 左对齐
          aligncenter: false, // 居中
          alignright: false, // 右对齐
          /* 2.2.1 */
          subfield: true, // 单双栏模式
          preview: false // 预览
        }
      },
      content: '',
      tree: {
        nodeDatas: [],
        defaultProps: {
          children: 'children',
          label: 'label',
          isLeaf: 'isLeaf'
        },
        curEditNode: {},
        nodeName: '',
        dragTarget: {},
        dragLeave: {}
      },
      article: {
        // 点击节点后显示的内容
        showContent: '',
        showTitle: ''
      }
    }
  },
  components: {
    mavonEditor,
    elTree: Tree
  },
  computed: {
    clearData () {
      return this.article.operation
    }
  },
  watch: {
    clearData () {
      this.article.title = ''
      this.article.content = ''
      this.editArticleKey = ''
    }
  },
  mounted () {
  },
  methods: {

    loadArticle (data) {
      let _this = this
      axios.get('/article/loadArticle', {params: {articleKey: data.nodeId}}).then(res => {
        if (res.data.status === 200) {
          _this.article.showTitle = res.data.datas.showTitle
          _this.article.showContent = marked(res.data.datas.showContent)
        }
      })
    },
    handleNodeClick (data, node, self) {
      if (node.isLeaf) {
        this.article.operation = 'articleShow'
        this.loadArticle(data)
      }
    },
    loadArticleTree () {
      let _this = this
      axios.get('/article/loadAticleTree').then(function (res) {
        if (res.data.status === 200) {
          _this.tree.nodeDatas = res.data.datas
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
